<extend name="common/base" />
<block name="resource">
    <link rel="stylesheet" href="__PUBLIC__/Home/mobile3/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/mobile3/css/match.css?v=1.0">
    <link rel="stylesheet" href="__PUBLIC__/Home/mobile3/css/main.css">
    <script type="text/javascript" src="__PUBLIC__/Home/mobile3/js/new.js?v=1.0.6"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/mobile3/js/video.js?v=1.0.7"></script>
    <script type="text/javascript" src="__PUBLIC__/Home/mobile3/js/lib/jquery.lazyload.min.js"></script>
    <style> 
        .videoifr{ 
               width:100%;
               position:relative;

         }
         .jwpreview {
              position:absolute;
              top:0;

         }
         .img_contain{
                position: relative;
                vertical-align: middle;
                text-align: center;
                display: table-cell;
         }
         .img_contain img{
            width: auto;
            height: auto;
            margin: auto;
            position: static;
            max-width: 100%;
            max-height: 100%;
         }
         .videoifr #iframe_contain{
              position:absolute;
              top:0;
         }
    </style>

</block>
<block name="body">
    <div data-role="page" class="sharepage back_gray2">
        <img style="position: absolute;opacity: 0;filter: alpha(opacity=0);z-index:-999;width:0;height:0;" src="{:C('WECHAT_SHARE_IMAGE')}" />
        <div data-role="main" class="ui-content">
            <ul class="shareul" data-bind="foreach:videoList">
                <li class="ls" id="" data-bind="attr:{'id':'JS-video-'+$index()}">
                    <div class="shareul-head back_gray2 ">
                        <a href="" target="_blank" data-bind="attr:{'href':videoLink}" class="display-box">
                            <img src="" data-bind="attr:{'src':avatar}">
                            <div class="shareul-box box-flexo">
                                <h2 class="font24 white">
                                    <span data-bind="text:nickname"></span>
                                    <span class="white font22" data-bind="text:create_time"></span>
                                </h2>
                                <p class="font22 colorsix">
                                    <!-- ko text:playtimes -->0<!-- /ko -->次播放
                                </p>
                            </div>
                        </a>
                    </div>
                    <div class="videoifr">
                        <div class="img_contain">
                          <img src="__PUBLIC__/Home/mobile3/images/lazyload.png" data-original="" class="JS-thumb" data-bind="attr:{'data-original':thumb}">
                        </div>
                    </div>
                    <div class="videocon back_gray2">
          <a href="" data-bind="attr:{'href':openapp}" onclick="showDownload()">
              <button class="downbtn back_orange font26">用66Play客户端观看更流畅</button>
          </a>
          <div class="ui-grid-a">
              <h1 class="ui-block-a font24 white" data-bind="text:title"></h1>
              <span class="ui-block-b">
                  <b class="share-prise" data-bind="click:like, css:{'share-prise-active':isLike}"></b>
              </span>
          </div>
                   <p class="colorsix font22 videcont" data-bind="text:detail" style="overflow:hidden;"></p> 
                   </div>
                </li>

            </ul>
        </div>
        <!--分享弹窗S-->
         <div id="sharePopup" class="ui-content usepop back_white"></div>
        <!--分享弹窗S-->
        <!--下载弹窗S-->
          <div  id="myPopup" class="ui-content usepop back_white">
                <p class="font30 colorthree">您还没有下载APP哦~本功能需要安装66Play APP之后才能使用。快来下载吧</p>
                <div class="btncolum display-box">
                    <button class="box-flexo cancel" onclick="hid()">取消下载</button>
                    <button class="box-flexo ok" onclick="download()">立即下载</button>
                </div>
            </div>
            <div class="popbg" onclick="hid()"></div> 
        <!--下载弹窗E-->
    </div>
    <script type="text/javascript">
        window._THIS = {
            videoLink : "{:U('share/video')}",
            iframeUrl : "{:U('VideoPlay/iframe')}",
            downloadUrl : "{:U('/')}",
            unlikeUrl : "{:U('like/unlike')}",
            dolikeUrl : "{:U('like/dolike')}",
            loginUrl : "{:U('user/login')}",
        };
        function dataInit() {
            var video = {$video|json_encode};
            var recommend = {$about_videos|json_encode};
            var list = $.merge([video], recommend);

            viewModel.videoList(getVideos(list));
           /* $.each($(".img_contain"),function(k,ele){
                  var width=$(window).width();
                  $(ele).css({'width':width,'height':'240px'})
            })*/
        }
        function download() {
            window.location.href = _THIS.downloadUrl;
        }
        $(function(){
            var videos = viewModel.videoList();
            $.each(videos, function(index, el) {
                var img_contain_width=$(window).width();
                var img_contain_height = (img_contain_width * 9 / 16) + 'px';
                if (el.height > el.width) {
                    img_contain_height = img_contain_width + 'px';
                }
                var element = $('#JS-video-' + index);
                element.find('.img_contain').css({'width':img_contain_width,'height':img_contain_height});

            });
            $('.JS-thumb').lazyload();
        })
        // var e1=$(".ls").clone();
        // $(".ls").remove();
        // for (var i = 1; i <= 10; i++) {
        //     e=e1.clone();
        //     e.attr('id', 'li-'+i);
        //     $(".shareul").append(e);
        // }
     </script>
</block>